<template>
    <div class="my">
        <Header></Header>
        <div class="my-main mn">
            <div class="left">
                <div class="tt">
                    <el-icon>
                        <Avatar/>
                    </el-icon>
                    <p>个人主页</p>
                </div>
                <div class="linkurl">
                    <div v-for="(item,index) in navlist" :class="activeIndex==index? 'active' : '' "
                         @click="GetLinkUrl(item,index)">
                        {{ item.title }}
                    </div>
                </div>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>


<script setup>
/**
 * 组件引入
 */
import {onMounted, reactive, ref, computed} from 'vue'
import http from "../../api/api.js"
import msg from "../../utils/Message.js"
import Footer from "../../components/Footer.vue"
import Header from "../../components/Header.vue"
import Cookies from "js-cookie";
import {useRouter} from 'vue-router'

/**
 * 全局变量
 * @type {UnwrapNestedRefs<{count: string, list: *[]}>}
 */

const router = useRouter()

const activeIndex = ref(0)

// 全局数据
var navlist = ref([

    {
        title: "个人主页",
        url: "/myindex",
    }, {
        title: "我的投标",
        url: "/mybid",
    }, {
        title: "我的收藏",
        url: "/mycollect",
    }, {
        title: "浏览足迹",
        url: "/mylog",
    }, {
        title: "账户设置",
        url: "/myaccount",
    }

])


/**
 * 页面挂载后
 */
onMounted(() => {
    isLogin()
});

/**
 * 计算属性
 */

/**
 * 方法区
 */


// 是否登录
const isLogin = () => {
    const token = Cookies.get("token")
    if (!token) {
        msg.message("您未登录，请登录", 'error')
    }
}

//跳转路由
function GetLinkUrl(item, index) {
    activeIndex.value = index
    router.push(item.url)
}

</script>

<style lang="scss" scoped>
@import '../../assets/scss/index.scss';
</style>

